<template>
	<el-dialog :title="title+'分类'" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1000px">
		<div class="form-box">
			<el-form ref="form" :model="form" :rules="rules" label-width="110px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="分类图片" prop="categoryPicture">
							<el-card shadow="hover" class="el-card-logo">
								<el-image :src="imgObject.localMainImage">
									<div slot="error" class="image-slot">
										<i>请添加分类图片</i>
									</div>
								</el-image>
							</el-card>
							
							<div style="margin-top: 12px;">
								<el-button type="primary" plain @click="addPic" icon="md-add"> 添加图片 </el-button>
								<span style="color: red; margin-left: 20px;">温馨提示：请上传256*256像素的PNG、JPG格式的图片，大小不超过2M。</span>
							</div>
							<keep-alive>
								<uploadImage :pageStatus="isPic" @on-change="onPicChange" @on-result="onPicResult" :pageData="imgType" @on-click="addPic"></uploadImage>
							</keep-alive>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="分类名称" prop="categoryName">
							<el-input v-model="form.categoryName" placeholder="请输入分类名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="分类编码" prop="categoryCode">
							<el-input v-model="form.categoryCode" placeholder="请输入分类编码" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="分类类型" prop="categoryType">
							<el-select v-model="form.categoryType" placeholder="请选择类型" :disabled="isEdit" style="width: 100%;">
								<el-option value="0" label="平台自营"></el-option>
								<el-option value="1" label="平台推荐"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="排序" prop="sort">
							<el-input type="number" v-model="form.sort" placeholder="请输入排序" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="是否启用" prop="isEnable">
							<el-radio v-model="form.isEnable" label="0">否</el-radio>
							<el-radio v-model="form.isEnable" label="1">是</el-radio>
						</el-form-item>
					</el-col>
				</el-row>
				
				<!-- <el-row>
					<el-col :span="24">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row> -->
			</el-form>
		</div>
		
		<div slot="footer">
			<el-button type="primary" @click="submit">保 存</el-button>
			<el-button @click="reset" v-if="!isEdit">重 置</el-button>
			<el-button @click="close">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import uploadImage from '../../common/uploadImage'
	import { addPlatformCategory, editPlatformCategory } from '@api/platform/platformCategory'
	export default {
		props: {
			isShow: Boolean,
			isEdit: Boolean,
			item: Object,
		},
		components: {
			uploadImage
		},
		data() {
			let validateImg = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请上传分类图片'));
				} else {
					callback();
				}
			}
			return {
				form: {
					categoryName: '',
					categoryCode: '',
					categoryPicture: '',
					categoryType: '0',
					sort: '',
					isEnable: '0',
				},
				rules: {
					categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }, { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }],
					categoryCode: [{ required: true, message: '请输入分类编码', trigger: 'blur' }, { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }],
					categoryPicture: [{required: true, validator: validateImg, trigger: 'blur'}],
					categoryType: [{required: true, message: '请选择分类类型', trigger: 'blur'}],
				},
				
				isPic: false,
				imgType: 0,
				imgObject: {
					localMainImage: '',
					mainImage: ''
				},
			}
		},
		computed: {
			title() {
				let text = '';
				if(this.isEdit) {
					text = '编辑'
				} else {
					text = '添加'
				}
				return text;
			},
		},
		watch: {
			isShow(val) {
				if(val) {
					if(this.isEdit) {
						this.initForm();
					}
				}
			},
			'form.categoryPicture': {
				handler(val) {
					if(val) {
						this.$refs['form'].clearValidate('categoryPicture');
					}
				},
				deep: true
			},
		},
		methods: {
			initForm() {
				this.form.categoryName = this.item.categoryName;
				this.form.categoryCode = this.item.categoryCode;
				this.form.categoryPicture = this.item.categoryPicture;
				this.form.categoryType = this.item.categoryType.toString();
				this.form.sort = this.item.sort;
				this.form.isEnable = this.item.isEnable.toString();
				
				this.imgObject.localMainImage =this.item.categoryPicture;
			},
			
			addPic(row) {
				this.imgType = 3;
				this.isPic = !this.isPic;
			},
			onPicChange(val) {
				this.isPic = val; // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			onPicResult(val) {
				this.imgObject = val;
				this.form.categoryPicture = this.imgObject.mainImage;
			},
			
			submit() { //提交添加or编辑
				this.$refs.form.validate(valid => {
					if (valid) {
						let params = this.objDeepCopy(this.form);
						
						if(this.isEdit) { //修改
							params.id = this.item.id;
							editPlatformCategory(params)
								.then(() => {
									this.$message.success('分类修改成功！');
									this.close();
									
									this.$emit('submit');
								})
						} else {
							addPlatformCategory(params)
								.then(() => {
									this.$message.success('分类添加成功！');
									this.close();
									
									this.$emit('submit');
								})
						}
					}
				})
			},
			objDeepCopy (source) { //深拷贝
				let sourceCopy = source instanceof Array ? [] : {};
				for (let item in source) {
					sourceCopy[item] = typeof source[item] === 'object' ? this.objDeepCopy(source[item]) : source[item];
				}
				return sourceCopy;
			},
			
			reset() { //重置表单
				this.$refs.form.resetFields();
				
				this.form.id = '';
				this.form.categoryName = '';
				this.form.categoryCode = '';
				this.form.categoryPicture = '';
				this.form.categoryType = '0';
				this.form.sort = '';
				this.form.isEnable = '0';
				
				this.imgObject = {
					localMainImage: '',
					mainImage: ''
				}
			},
			close() {
				this.$emit('close');
				this.reset();
			}
		}
	}
</script>

<style scoped lang="scss">
	.el-card-logo {
		height: 160px !important;
		width: 160px !important;
		
		::v-deep .el-card__body {
			height: 160px !important;
			width: 160px !important;
			padding: 0px !important;
		}
	}

	.el-image {
		width: 100%;
		height: 100%;
	}
	::v-deep .image-slot {
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>